<template>
  <view>
    <u-navbar title="请假" autoBack fixed placeholder></u-navbar>
    <view class="content">
      <view class="form">
        <u-form :model="form" :rules="rules" label-width="100px">
          <u-form-item label="请假类型：" prop="type" required>
            <view style="width: 100%;height: 22px;" @click="type = true">{{ form.typeLabel }}</view>
          </u-form-item>
          <u-form-item label="请假天数：" prop="day" required>
            <u-input type="number" v-model="form.day" suffixIcon="天" maxlength="3" suffix-icon-style="color: #999;font-size: 12px;"></u-input>
          </u-form-item>
          <u-form-item label="请假原因：" prop="reason" required>
            <u-textarea v-model="form.reason" maxlength="200" placeholder="请假原因"></u-textarea>
          </u-form-item>
          <u-form-item label="图片：" :required="form.type == '1'">
            <u-upload :afterRead="uploadImg" :fileList="fileList" @delete="deleteImg" :maxCount="4"></u-upload>
          </u-form-item>
        </u-form>
        <u-button color="#00a679" shape="circle" @click="handleSubmit">提交</u-button>
      </view>
    </view>

    <u-picker :columns="typeList" :show="type" @cancel="type = false" @confirm="selectType"></u-picker>
  </view>
</template>

<script>
  import {
    addLeave
  } from '@/api/leave'
  import moment from '@/common/moment'
  import { mapGetters } from 'vuex'
  import {
    uploadFile
  } from '@/api/file'
  export default {
    data() {
      return {
        form: {
          id: '',
          name: '',
          type: '',
          typeLabel: '',
          day: 1,
          reason: '',
          imgs: []
        },
        rules: {

        },
        type: false,
        typeList: [
          [
            { text: '事假', value: '0' },
            { text: '病假', value: '1' }
          ]
        ],
        fileList: []
      }
    },
    computed: {
      ...mapGetters(['id'])
    },
    methods: {
      selectType({index, value, values}) {
        this.form.type = value[0].value
        this.form.typeLabel = value[0].text
        this.type = false
      },
      handleSubmit() {
        if((this.form.type ?? '') == '') {
          this.$toast.show({
            msg: '请选择请假类型'
          })
          return
        }
        if((this.form.day ?? '') == '') {
          this.$toast.show({
            msg: '请输入请假天数'
          })
          return
        }
        if((this.form.reason ?? '') == '') {
          this.$toast.show({
            msg: '请输入请假原因'
          })
          return
        }
        if(this.form.type == '1' && this.fileList.length == 0) {
          this.$toast.show({
            msg: '请上传图片'
          })
          return
        }
        this.form.userId = this.id
        this.form.name = `JT${moment(new Date()).format('yyyyMMDDHHmmss')}`
        this.form.imgs = JSON.stringify(this.form.imgs)
        addLeave(this.form).then(res => {
          if(res.code === 200) {
            this.$toast.show({
              msg: res.msg
            })
            this.$store.addSuccess = true
            uni.navigateBack()
          }
        })
      },
      uploadImg(file, list, name) {
        uploadFile({
          data: {
            file,
            type: 'leave',
            uid: this.id
          }
        }).then(res => {
          if(res.code === 200) {
            this.fileList.push(file)
            this.form.imgs.push(res.data.downUrl)
          }
        })
      },
      deleteImg({index}) {
        this.fileList.splice(index, 1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form {
    margin: 10px 0;
    padding: 0 10px 10px;
    box-sizing: border-box;
    background-color: #ffffff;
  }
</style>